<template>
  <div class="userEditor">
    <maynav title="个人信息" path="/home/user" right="保存"></maynav>
    <div class="c1">
      <userCell
        class="avatar-picture"
        type="img"
        title="头像"
        :value="info.photo"
        icon="&#xe653;"
        @click.native="goEditInfo('photo')"
      ></userCell>
      <userCell
        title="昵称"
        icon="&#xe653;"
        :value="info.name"
        @click.native="goEditInfo('name')"
      ></userCell>
      <userCell @click.native="editor" title="介绍" icon="&#xe653;"></userCell>
    </div>
    <div class="c2">
      <userCell
        icon="&#xe653;"
        @click.native="showGender = true"
        title="性别"
        :value="genderObj[info.gender]"
      ></userCell>
      <userCell
        title="生日"
        icon="&#xe653;"
        @click.native="showCurrcnt = true"
        :value="info.birthday"
      ></userCell>
    </div>
    <!-- 性别弹出框 v-if="bol"-->
    <van-popup v-model="showGender" position="bottom">
      <van-picker
        title="修改性别"
        show-toolbar
        :columns="Object.values(genderObj)"
        :default-index="info.gender"
        @confirm="genderConfirm"
        @cancel="showGender = false"
      />
    </van-popup>
    <!-- 出生年月日弹窗v-model="showCurrent" -->
    <van-popup v-model="showCurrcnt" position="bottom">
      <van-datetime-picker
        v-model="currentDate"
        type="year-month"
        title="选择年月"
        :min-date="minDate"
        :max-date="maxDate"
        @confirm="currentConfirm"
        @cancel="showCurrcnt = false"
      />
    </van-popup>
  </div>
</template>

<script>
import userCell from './userCell'
// import { mapState } from 'vuex'
import { userProfile } from '@/api/user.js'
export default {
  data () {
    return {
      showGender: false,
      showPersonality: false,
      showCurrcnt: false,
      inputValue: '',
      bol: true,
      genderObj: {
        0: '未知',
        1: '男',
        2: '女'
      },
      minDate: new Date(1949, 0, 1),
      maxDate: new Date(2025, 10, 1),
      currentDate: new Date(),
      info: ''
    }
  },
  // 注册组件
  components: {
    userCell
  },
  // 事件方法
  methods: {
    editor () {
      this.showPersonality = true
    },
    goEditInfo (str) {
      this.$router.push('/home/userEditor?type=' + str)
    },
    // 修改性别
    genderConfirm (value, index) {
      this.showGender = false
      this.userEditor({
        gender: index
      })
    },
    // 修改生日
    currentConfirm (value) {
      this.showCurrcnt = false
    },
    // 编辑用户信息
    userEditor (obj) {
      this.$toast.loading({
        duration: 0
      })
      userProfile(obj).then(() => {
        this.$toast.success('修改资料成功')
        // 更新vuex中守卫
        this.$store.dispatch('reUserInfo')
      })
    },
    // 跳转
    goEditorInfo (str) {
      this.$router.push('/home/user')
    }
  },
  async created () {
    const res = await userProfile()
    console.log(res)
    this.info = res.data
  },
  // 监听
  watch: {
    showGender (newVal) {
      if (!newVal) {
        this.bol = false
      }
      this.$nextTick(() => {
        this.bol = true
      })
    }
  }
}
</script>

<style lang="less" scoped>
.userEditor {
  background-color: #f7f4f7;
}
</style>
